<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>findpkgs</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		*::-webkit-scrollbar {  
    	display: none;  
		}

		#app{
			display: none;
		}

		.header {
			background: #333;
			position: sticky;
			top:0;
			z-index: 99;
		}

		.header-inner {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.header .logo{
			height: 46px;
			cursor: pointer;
		}

		.header .icon {
			color: #fff;
			font-size: 18px;
			cursor: pointer;
			transition: all .5s;
		}

		.header .icon:hover{
			transform: scale(1.2);
		}

		.container {
			width: 1200px;
			margin: 0 auto;
		}

		.serchForm {
			margin-top: 20px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<div class="container">
				<div class="header-inner">
					<img @click="goIndex()" class="logo" src="" alt="">
					<i class="icon el-icon-search" @click="searchVisibleChange()"></i>
				</div>
			</div>
		</div>
		<div class="container">
			<el-collapse-transition>
				<div v-if="searchVisible">
					<el-form size="mini" :model="formData" @submit.native.prevent class="serchForm">
						<el-form-item label="操作系统">
							<el-checkbox-group v-model="formData.os">
								{% for os in filters['os'] %}
								<el-checkbox label="{{ os }}">{{ os }}</el-checkbox>
								{% endfor %}
							</el-checkbox-group>
						</el-form-item>
						<el-form-item label="架构">
							<el-checkbox-group v-model="formData.arch">
								{% for arch in filters['arch'] %}
								<el-checkbox label="{{ arch }}">{{ arch }}</el-checkbox>
								{% endfor %}
							</el-checkbox-group>
						</el-form-item>
						<el-form-item label="搜索过滤">
							<el-checkbox-group v-model="formData.search">
								<el-checkbox label="Pkg Name">Pkg Name</el-checkbox>
								<el-checkbox label="Requires">Requires</el-checkbox>
								<el-checkbox label="Provides">Provides</el-checkbox>
								<el-checkbox label="files">files</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item label="关键字">
							<el-autocomplete v-model="formData.q" :fetch-suggestions="querySearchAsync" style="width:300px" @select="handleSearch()" @keyup.enter.native="handleSearch()"/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleSearch()">搜索</el-button>
							<el-button @click="clearSearch()">清空</el-button>
							<el-alert title="搜索返回结果数量有限制，请尽量使用过滤条件或准确搜索" type="warning" :closable="false" style="margin-top: 10px;"/>
						</el-form-item>
					</el-form>
					<el-divider></el-divider>
				</div>
			</el-collapse-transition>
			<el-table :data="tableData" size="mini" row-key="id" style="width: 100%">
				<el-table-column label="操作系统" prop="os" width="250">
				</el-table-column>
				<el-table-column label="架构" prop="arch" width="150">
				</el-table-column>
				<el-table-column label="包" prop="package">
					<template slot-scope="scope">
						<div v-for="(item,index) in scope.row.package" :key="index">
							<el-link type="primary" :href="item[0]" target="_blank" style="font-size: 12px;"> {{ '{{' }} item[1] {{ '}}' }}</el-link>
							<p>{{ '{{' }} item[2] {{ '}}' }}</p>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</body>

<script type="module">
	const results = {{ results| tojson | safe}}
	const os = {{ filters['os']| tojson | safe}}
	const arch = {{ filters['arch']| tojson | safe}}

	import { v4 as uuidv4 } from 'https://jspm.dev/uuid';
	
	function urlParamsToObject(url) {
    const paramsArray = url.split('?')[1].split('&');
    const paramsObject = {};
  
    for (let i = 0; i < paramsArray.length; i++) {
        const [key, value] = paramsArray[i].split('=');
        paramsObject[key] = decodeURIComponent(value);
    }
    return paramsObject;
	}

	new Vue({
		el: '#app',
		data: function () {
			return {
				searchVisible: false,
				formData: {
					os: os, arch: arch, search: ["Pkg Name", "Requires", "Provides", "files"],q:""
				},
				tableData: []
			}
		},
		watch:{
			formData:{
				handler(data) {
					localStorage.formData = JSON.stringify(data)  
				},
				deep:true
			},
			searchVisible:{
				handler(data) {
					localStorage.searchVisible = data
				},
			},
		},
		mounted() {
			document.getElementById("app").style.display="block"
			if(window.location.search){
				const data = urlParamsToObject(window.location.href)
				const q = data.q
				const filter = JSON.parse(data.filter)
				for (const key in filter) {
					this.$set(this.formData, key, filter[key])
				}
				this.$set(this.formData, 'q', q)
				this.searchVisible = true
			}else if(localStorage.formData){
				this.searchVisible = localStorage.searchVisible==="true"?true:false
				this.formData = JSON.parse(localStorage.formData)
			}
			this.tableData = Object.keys(results).map(os => {
				return {
					id: uuidv4(),
					os: os,
					arch: Object.keys(results[os]).join(','),
					package: "",
					children: Object.keys(results[os]).map(arch => {
						return {
							id: uuidv4(),
							os: os,
							arch: arch,
							package: results[os][arch],
						}
					})
				}
			})
		},
		methods: {
			searchVisibleChange:function(){
				this.searchVisible = !this.searchVisible
				if(this.searchVisible){
					window.scrollTo({  
						top: 0,  
						behavior: 'smooth'  
					});
				}
			},
			clearSearch: function () {
				this.formData = {
					os: [],
					arch: [],
					search: [],
					q:""
				}
			},
			querySearchAsync:function(queryString, callback){
				fetch("/autocomplete/?q=" + encodeURIComponent(queryString) + "&filter=" + encodeURIComponent(JSON.stringify({
					os:this.formData.os,
					arch:this.formData.arch,
					search:this.formData.search,
				}))).then(response => response.json()).then(data => {
					callback(data.map(item=>{
						return{
							value:item
						}
					}))
				})
				.catch(error => {
					this.$message.error(error);
				});
			},
			handleSearch:function(){
				window.location.href = '/search/?q=' + encodeURIComponent(this.formData.q) + "&filter=" + encodeURIComponent(JSON.stringify({
					os:this.formData.os,
					arch:this.formData.arch,
					search:this.formData.search,
				}));
			},
			goIndex(){
				window.location.href = window.location.origin
			}
		},
	})
</script>

</html>